<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="box_1">注：每天19:00后可预约第二天坐诊的医生</view>
		<view class="box_2" v-for="(p,index) of doctor" :key="p.id">

			<!-- <view class="headl" style="border-radius: 35rpx;"> -->
			<image style="width: 150rpx; height: 150rpx; border-radius: 30rpx;" :src="$store.state.src"></image>
			<!-- </view> -->
			<view>
				<h2 style="">{{$store.state.name}}</h2>
				<view style="">{{$store.state.content}}</view>
			</view>
			<!-- <p>介绍{{p.intorduce}}</p> -->
			<!-- <view>（缺一个向下的箭头）</view> -->
		</view>
		<view class="appoint_1">
			<!-- <view>门诊预约</view> -->
			<!-- <view style="border-top:8rpx solid green;width: 105rpx;margin:12rpx auto;border-radius: 3px;"></view> -->
			<view class="appoint_2">
				<view class="appointday"  @click="today()" :class="bcgc_td">今天({{atoday}})</view>
				<view class="appointday"  @click="tomorrow()" :class="bcgc_tm">明天({{atomorrow}})</view>
				<view class="appointday"  @click="a_tomorrow()" :class="bcgc_a_t">后天({{adayAfterTomorrow}})</view>
			</view>
			<view style="border-top:1px solid #d5d5d5;margin-top: 5rpx;"></view>
			<view style="background-color: white; margin:10rpx 0 0 11rpx;">
				<tbody style="width: 100%;">
					<tr v-for="(p,index) of personal" :key="p.id" :class="a_1">
						<td>{{p.start_time}}-{{p.end_time}}</td>
						<td class="td_sec">￥{{p.price}}</td>
						<td>余{{p.number}}</td>
						<td>
							<view class="td_last" @click="open(p,index)" :style="{pointerEvents: p.number == 0? 'none':''}">{{p.number == 0? '已满':'预约'}}</view>
						</td>
						<td v-if="p.numble == 0?true:false">
							<view class="td_last2">{{p.max}}</view>
						</td>
					</tr>
					<tr v-for="(p,index) of person_2" :key="p.index" :class="b_1">
						<td>{{p.start_time}}-{{p.end_time}}</td>
						<td class="td_sec">￥{{p.price}}</td>
						<td>余{{p.number}}</td>
						<td>
							<view class="td_last" @click="open(p,index)">预约</view>
						</td>
						<td v-if="p.numble == 0?true:false">
							<view class="td_last2">{{p.max}}</view>
						</td>
					</tr>
					<tr v-for="(p,index) of person_3" :key="p.index" :class="c_1">
						<td>{{p.start_time}}-{{p.end_time}}</td>
						<td class="td_sec">￥{{p.price}}</td>
						<td>余{{p.number}}</td>
						<td>
							<view class="td_last" @click="open(p,index)">预约</view>
						</td>
						<td v-if="p.numble == 0?true:false">
							<view class="td_last2">{{p.max}}</view>
						</td>
					</tr>
				</tbody>
			</view>
		</view>
		<view style="height: 70rpx;line-height: 70rpx;display: block;			margin: 0 10rpx;">
			<h3 style="display: inline-block;" @click="appraise">发表评价</h3>
			<h3 style="display: inline-block;float: right;">查看评价
				<view style="display: inline-block;color: rgb(96, 141, 202);margin-right: 5rpx;font-size: 45rpx;">
					<navigator url="">></navigator>
				</view>
			</h3>
		</view>
		<view style="text-align: center;margin-left: 150rpx ;">
			<!-- <view>
				<button @click="Vshou">支付</button>
			</view> -->
			<view>
				<uni-popup ref="popup" type="bottom">
					<view class="btn-group">
						<scroll-view scroll-y="true" style="width: 100%;">
							<view style="background-color: white;">
								<view class="btn_view" style="width: 100%;margin-left: 10rpx; background-color: white;" v-for="(p,index) of btn" :key="p.index" @tap="Tab(index)">
									<tr :class="Ind===index?'active':''" @click="select(p,index)">
										<td>{{p.name}}</td>
										<td>{{p.sex ==0? '男':'女'}}</td>
										<td>{{p.phone}}</td>
									</tr>
								</view>
							</view>
						</scroll-view>
						<view class="btn_position">
							<view class="cancel">取消</view>
							<view class="submit" @click="submit">提交</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>

	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				book:null,
				selectobj:null,
				id:null,
				show: false,
				Ind: 0,
				count: '0',
				a_1: 'a',
				b_1: 'b',
				c_1: 'b',
				bcgc_td: 'bcgc',
				bcgc_tm: '',
				bcgc_a_t: '',
				day: '',
				currentDate: new Date(),
				personal:[],
				person_1: [
					{
						id: '000',
						start_time: "09:00",
						end_time:'09:30',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '001',
						start_time: "09:30",
						end_time:'10:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '002',
						start_time: "10:00",
						end_time:'10:30',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '003',
						start_time: "10:30",
						end_time:'11:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '004',
						start_time: "11:00",
						end_time:'11:30',
						price: "30.00",
						numble: "0",
						order: "预约",
						max: '已满'
					},
					{
						id: '005',
						start_time: "11:30",
						end_time:'12:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
				],
				person_2: [{
						id: '000',
						start_time: "09:00",
						end_time:'09:30',
						price: "30.00",
						numble: "2",
						order: "预约",
						max: '已满'
					},
					{
						id: '001',
						start_time: "09:30",
						end_time:'10:00',
						price: "30.00",
						numble: "11",
						order: "预约",
						max: '已满'
					},
					{
						id: '002',
						start_time: "10:00",
						end_time:'10:30',
						price: "30.00",
						numble: "0",
						order: "预约",
						max: '已满'
					},
					{
						id: '003',
						start_time: "10:30",
						end_time:'11:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '004',
						start_time: "11:00",
						end_time:'11:30',
						price: "30.00",
						numble: "0",
						order: "预约",
						max: '已满'
					},
					{
						id: '005',
						start_time: "11:30",
						end_time:'12:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
				],
				person_3: [
					{
						id: '000',
						start_time: "09:00",
						end_time:'09:30',
						price: "30.00",
						numble: "3",
						order: "预约",
						max: '已满'
					},
					{
						id: '001',
						start_time: "09:30",
						end_time:'10:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '002',
						start_time: "10:00",
						end_time:'10:30',
						price: "30.00",
						numble: "11",
						order: "预约",
						max: '已满'
					},
					{
						id: '003',
						start_time: "10:30",
						end_time:'11:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
					{
						id: '004',
						start_time: "11:00",
						end_time:'11:30',
						price: "30.00",
						numble: "0",
						order: "预约",
						max: '已满'
					},
					{
						id: '005',
						start_time: "11:30",
						end_time:'12:00',
						price: "30.00",
						numble: "1",
						order: "预约",
						max: '已满'
					},
				],
				doctor: [{
					id: "000",
					name: "张三",
					intorduce: "12345678"
				}, ],
				btn: [{
						name: 'aa',
						value: '0990',
						price: '7908',
					},
					{
						name: 'aa',
						value: '0990',
						price: '7908',
					},
				],
				atoday: '',
				atomorrow: '',
				adayAfterTomorrow: '',
				index:null
			}
		},
		mounted() {
			this.atoday = moment().format('YYYY-MM-DD');
			const tomorrow = moment(this.atoday).add(1, 'days');
			const dayAfterTomorrow = moment(tomorrow).add(1, 'days');
			this.atomorrow = tomorrow.format('YYYY-MM-DD');
			this.adayAfterTomorrow = dayAfterTomorrow.format('YYYY-MM-DD');
			const day = this.currentDate.getHours()
			console.log(this.atoday)
			console.log(this.atomorrow)
			console.log(this.adayAfterTomorrow)
			console.log(this.currentDate)
			console.log(typeof(this.currentDate))
			console.log(day)
			console.log(typeof(day))
			// this.vifu()
			uni.request({
				url: 'http://124.223.168.50:8000/test/bookinginterface/',
				method: 'GET',
				data: {
					doctor_id:this.$store.state.id
				},
				success: (res) => {
					console.log(res)
					this.person_1 = res.data.msg[0].bookings
					// for(let i in this.person_1){
					// // 	console.log(i)
					// 	i.start_time = i.start_time.split(':')[0] + i.start_time.split(':')[1]
					// 	i.end_time = i.end_time.split(':')[0] + i.end_time.split(':')[1]
					// }
					this.personal = this.person_1.filter((p,index) => {
						return p.booking_date == this.atoday? p:null
					})
					this.id = 1
				},
				fail: (err) => {
					console.log(err)
				}
			})
			uni.request({
				url:'http://124.223.168.50:8000/test/visitor/',
				method:'GET',
				data:{
					open_id:this.$store.state.open_id
				},
				withCredentials:true,
				success: (res) => {
					console.log(res)
					this.btn = res.data.msg
					this.selectobj = res.data.msg[0]
					console.log(this.selectobj);
				}
			})
			// this.$refs.popup.open('bottom')
		},
		methods: {
			select(e,b) {
				console.log(e);
				console.log(b);
				this.selectobj = e
				console.log(this.selectobj);
			},
			Tab(index) {
				if (this.Ind === index) {
					return;
				}
				this.Ind = index
			},
			
			booking(e, b) {
				console.log(e)
				console.log(b)
				
			},
			open(e,b) {
				console.log(e);
				console.log(b);
				this.book = e
				console.log(this.book);
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
				console.log("预约获取")
				// uni.request({
				// 	url: 'http://192.168.3.43:8000/booking/patient/',
				// 	method: 'GET',
				// 	data: {
				// 		open_id:'123',
				// 	},
				// 	success: (res) => {
				// 		console.log(res)
				// 	},
				// 	fail: (err) => {
				// 		console.log(err)
				// 	}
				// })
			},
			submit() {
				console.log("提交了")
				const aaa = {
					name: this.selectobj.name,
					gender: this.selectobj.sex,
					birthday: this.selectobj.birthday,
					card_id: this.selectobj.card_id,
					phone: this.selectobj.phone,
					start_time: this.book.start_time,
					end_time: this.book.end_time,
					amount: this.book.price,
					card_number: 1,
					open_id: this.$store.state.open_id,
					doctor_name:this.$store.state.name,
					booking_type:1,
					doctor_id:this.book.doctor_id,
					id:this.book.id
				}
				console.log(aaa);
				uni.request({
					url: 'http://124.223.168.50:8000/test/appointment/',
					method: 'POST',
					data: aaa,
					success: (res) => {
						console.log(res)
						this.$refs.uToast.show({
							type:'success',
							message:'预约成功'
						})
						const ord = {
								open_id:this.$store.state.open_id,
								amount:this.book.price,
								appointment_type:this.$store.state.type,
								card_id:this.selectobj.card_id,
								start_time: this.book.start_time,
								name:this.selectobj.name,
								doctorbooking:this.book.id,
								doctor_name:this.$store.state.name,
								state:1
							}
							console.log(this.book.id);
						uni.request({
							url:'http://124.223.168.50:8000/test/order/save/',
							method:'POST',
							data:ord,
							success: (res) => {
								console.log(res)
								this.$store.commit('order',ord)
								setTimeout(() => {
									uni.reLaunch({
									url:'/pages/select/select'
								})
								},1000)
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
				
			},
			get_time(){
				console.log("提交了")
				// uni.request({
				// 	url: 'http://192.168.0.48:8000/booking/bookinginterface/',
				// 	method: 'GET',
				// 	data: {
				// 		doctor_id:1
						
				// 	},
				// 	success: (res) => {
				// 		console.log(res)
				// 	},
				// 	fail: (err) => {
				// 		console.log(err)
				// 	}
				// })
			},
			// vifu() {
			// 	console.log('9999999999')
			// 	uni.request({
			// 		url: 'http://192.168.0.48:8000/booking/appointment/',
			// 		method: 'POST',
			// 		data: {
			// 			name: 'ssss',
			// 			gender: 1,
			// 			birthday: 'bc',
			// 			card_id: 'aa',
			// 			phone: 'bg',
			// 			start_time: 'oi',
			// 			end_time: 'io',
			// 			amount: 30,
			// 			card_number: 1,
			// 			open_id: '123',
			// 			doctor_name:'aaaaa',
			// 			booking_type:1
			// 		},
			// 		success: (res) => {
			// 			console.log(res)
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	})
			// },
			// Vshou() {
			// 	console.log('9999999999')
			// 	uni.request({
			// 		url: 'http://192.168.0.48:8000/booking/bookinginterface/',
			// 		method: 'GET',
			// 		data: {
			// 			doctor_id: 1,
			// 		},
			// 		success: (res) => {
			// 			console.log(res)
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	})
			// },
			appraise() {
				uni.navigateTo({
					url: '/pages/appraise/appraise'
				})
			},
			today() {
				this.a_1 = 'a';
				this.b_1 = 'b';
				this.c_1 = 'b';
				this.bcgc_td = 'bcgc';
				this.bcgc_tm = '';
				this.bcgc_a_t = '';
				console.log()
				this.personal = this.person_1.filter((p,index) => {
					return p.booking_date == this.atoday? p:null
				})
			},
			tomorrow() {
				this.a_1 = 'b';
				this.b_1 = 'a';
				this.c_1 = 'b';
				this.bcgc_td = '';
				this.bcgc_tm = 'bcgc';
				this.bcgc_a_t = '';
				this.person_2 = this.person_1.filter((p,index) => {
					return p.booking_date == this.atomorrow? p:null
				})
				console.log(this.personal)
			},
			a_tomorrow() {
				this.a_1 = 'b';
				this.b_1 = 'b';
				this.c_1 = 'a';
				this.bcgc_td = '';
				this.bcgc_tm = '';
				this.bcgc_a_t = 'bcgc';
				this.person_3 = this.person_1.filter((p,index) => {
					return p.booking_date == this.adayAfterTomorrow? p:null
				})
				console.log(this.personal)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.upopup {
		width: 750rpx;
		height: 300rpx;
		text-align: center;
	}

	.a {
		display: block;
	}

	.b {
		display: none;
	}

	.bcgc {

		background-color: royalblue;
		color: white;
	}

	.box_1 {
		line-height: 57rpx;
		height: 57rpx;
		color: orangered;
		font-size: 20rpx;
		margin-bottom: 10rpx;
		// background-color: bisque;
		text-align: center;
		display: block;
	}

	.box_2 {
		text-align: center;

		.headl {
			margin: auto;
			text-align: center;
			width: 210rpx;
			height: 210rpx;
			border-radius: 35rpx;
			background-color: skyblue;
			display: block;
		}
	}

	.appoint_1 {
		text-align: center;
		background-color: rgb(249, 249, 249);
		border-radius: 15rpx;
		margin: 25rpx 0 25rpx 0;
		
		.appoint_2 {
			border: 1px solid green;
			height: 55rpx;
			// padding:2rpx 0 8rpx;
			border-radius: 5rpx;
			text-align: center;
			margin: 0 10rpx;

			.appointday {
				width: 33.33%;
				line-height: 55rpx;
				font-size: 25rpx;
				display: inline-block;
			}
		}
		tbody,tbody tr{
			width: 100%;
		}
		tbody tr td {
			margin-top: 15rpx;
			text-align: center;
			display: inline-block;
			line-height: 58rpx;
			height: 58rpx;
			width: 179.5rpx;
			font-size: 26rpx;
		}

		.td_sec {
			color: orangered;
		}

		.td_last {
			text-align: center;
			height: 58rpx;
			line-height: 58rpx;
			border: 1px solid #dcdcdc;
			border-radius: 10rpx;
			width: 125rpx;
			letter-spacing: 0.2em;
			margin-left: 30rpx;
		}

		.td_last2 {
			text-align: center;
			color: #8d8d8d;
			height: 60rpx;
			border-radius: 10rpx;
			line-height: 60rpx;
			width: 127rpx;
			letter-spacing: 0.2em;
			margin-left: 30rpx;
		}

		.vifu {
			margin-left: 10rpx;
		}
	}

	.f-active-color {
		color: limegreen;
		display: block;
	}

	.choice {
		background-color: white;
		min-height: 350rpx;

		.choice_1 {
			display: inline-block;
			height: 80rpx;
			margin-bottom: 10rpx;

			.choice_1_1 {
				display: inline-block;
				width: 250rpx;
				text-align: center;
				line-height: 80rpx;
				background-color: #00d099;
			}
		}


	}

	.btn-group {
		box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5);
		// height: 700rpx;

		.btn_view {

			background-color: white;

			tr {
				height: 70rpx;
				line-height: 70rpx;
			}

			td {
				display: inline-block;
				width: 240rpx;
				text-align: center;
			}
		}

		/* 示例阴影参数，根据需要进行调整 */
		.btn_position {
			display: flex;
			width: 100%;

			.cancel {
				width: 50%;
				text-align: center;
				padding: 20rpx 0;
				color: #ffffff;
				background-color: #b3b3b3;
			}

			.submit {
				width: 50%;
				background-color: #00d099;
				text-align: center;
				padding: 20rpx 0;
				color: #fff;
			}
		}
	}

	.active {
		color: skyblue;
	}
</style>